// 使用 as * 将变量暴露到全局（当多个模块暴露同名变量时，后加载的会覆盖前者，所有变量直接暴露到全局，难以追踪变量来源）
@use 'variables' as *;
@use "mixins/flex" as *;
@use "component/button";
@use "component/card";
@use "functions" as utils;
@use "themes";


body {
    font-family: $font-stack;
    margin: 0;
    padding: 0;
}

.container {
    @include flex-center(column);
    width: 80%;
    height: 100vh;
    gap: 2rem;
    color: var(--text-color);
    background: var(--bg-color);
    // background: url('~@/assets/images/CAM.jpg') no-repeat center / cover;
    margin:  0 auto;

    .banner {
        @include flex-center();
        gap: 3rem;

        .title {
            color: var(--primary-color);
            font-size: utils.fn-calculate-rem(32);
            font-weight: 700;
            text-align: center;
            text-shadow: 1px 1px 1px #000;
        }
    }

    .img-box {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;

        img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }
    }

    .svg-box {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .icon {
        width: 80px;
        height: 80px;
        transition: all 0.3s;
    }
    .icon:hover {
        transform: scale(1.2);
        color: #C00;
    }

     .svg-background {
        width: 90px;
        height: 90px;
        background-image: url('~@/assets/icon/年度体检.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 1px solid #eee;
    }
}

/*
推荐使用 Sass 的情况
    大型项目：需要变量作用域、循环、条件等高级功能。
    团队协作：通过 @use 规则管理模块化代码。
    主流框架：使用基于 Sass 的 UI 库（如 Ant Design、Material UI）。
    示例项目：
        企业级后台管理系统
        设计系统（如 Ant Design 5+）
        需要多主题支持的网站
*/